<template>
  <div class="chat-container">
    <div class="chat-messages">
      <ul>
        <li v-for="message in messages" :key="message.id">
          <span v-if="message.type === 'received'">{{ message.content }}</span>
          <span v-else>{{ message.content }}</span>
        </li>
      </ul>
    </div>
    <div class="chat-input">
		<button class="q" @click="yuyin">语音识别</button>
      <input type="text" v-model="inputMessage" @keyup.enter="sendMessage" placeholder="请输入消息" />
      <button @click="sendMessage" class="q" >发送</button>
    </div>
  </div>
</template>
<script>
	
	export default {
		data() {
			return {
				messages: [{
					id: Date.now(),
					content: '你好，请问有什么能帮助到你？',
					type: 'sent'
				}],
				inputMessage: ''
			};
		},
		methods:{
			yuyin(){
				var that=this
			uni.authorize({
			                    scope: 'scope.record', // 获取录音功能，也就是麦克风权限
			                    success: (res) => {
			                        // 用户授权使用麦克风权限调用语音搜索事件函数
			                        that.plugin()
			                    },
			                    // 用户没有授权使用麦克风权限执行以下代码
			                    fail(res) {
			                        // 显示模态弹窗提示用户没有开启麦克风权限
			                        uni.showModal({
			                            content: '检测到您未开启麦克风权限，请保持麦克风权限为开启状态',
			                            confirmText: '去开启',
			                            showCancel: false,
			                            success: (res) => {
			                                console.log(res)
			                                if(res.confirm) {
			                                    // 调起客户端小程序设置界面，返回用户设置的操作结果
			                                    uni.openSetting({
			                                        success: (res) => {
			                                            console.log(res)
			                                            if(res.authSetting['scope.record'] == false) {
			                                                this.plugin()
			                                            }
			                                        }
			                                    })
			                                } else {//返回上一页
			                                    uni.navigateBack({
			                                        delta: 1
			                                    })
			                                }
			                            }
			                        })
			                    }
								})
			},
			plugin(){
				           var that = this
			                var plugin = requirePlugin('WechatSI')
			                var manager = plugin.getRecordRecognitionManager()
			                // 设置录音的参数
			                manager.start({
			                    duration: 5000, // 时间
			                    lang: "zh_CN" // 语言
			                })
			                // 开始录音
			                manager.onStart = function(res) {
			                    console.log("成功开始录音识别", res)
			                    if(res.msg == 'Ok') {
			                        // 提示用户正在录音
			                        uni.showToast({
			                            title: '正在识别语音...',
			                            duration: 5000,
			                            icon: 'loading'
			                        })
			                    }
			                }
			                // 录音结束
			                manager.onStop = function(res) {
			                    // 提示用户正在跳转到搜索页面（因为我做的时候，在跳转这块会有1~2秒的时间，所以我设置了一个提示框）
			                    uni.showToast({
			                        title: '正在跳转...',
			                        duration: 1500,
			                        icon: 'success'
			                    })
			                    // 将识别的语音翻译成文本
			                    plugin.translate({
			                        lfrom: 'en_US',
			                        lto: 'zh_CN',
			                        content: res.result,
			                        success: function(res) {
			                            if(res.retcode == 0) {
			                                //  (iphone是这样,Android不清楚)语音识别有时会在末尾添加符号
			                                if(res.result.charAt(res.result.length - 1) == '。' || res.result.charAt(res.result.length - 1) == '.') {
			                                    res.result = res.result.substr(0, res.result.length - 1);
			                                }
			                                // 将翻译后的内容放到搜索框中
			                                that.inputMessage = res.result
			                            } else {
			                                console.log('翻译失败', res)
			                            }
			                        },
			                        fail: function(res) {
			                            console.log('网络失败', res)
			                            // 当用户说话声音小或者用户没有说话就会报这两个错误
			                            if(res.retcode == -10001 || res.retcode == -10002) {
			                                uni.showToast({
			                                    title: '没有听清您说什么',
			                                    duration: 1000,
			                                    icon: 'error'
			                                })
			                            }
			                        }
			                    })
			                }
			    			 // 打印错误信息
			                manager.onError = function(res) {
			                    console.error('error msg', res.msg)
			                }
			            },
			async sendMessage() {
				var that=this
			      // 发送消息
			      const newMessage = {
			        id: Date.now(),
			        content: that.inputMessage,
			        type: 'sent'
			      };
			      that.messages.push(newMessage);
				 const datas = await uni.$http.get('http://localhost:8020/dui',{from:that.inputMessage})
				 console.log(datas.data.to)
				 //  uni.request({
				 //  	url:'https://www.baidu.com/s?wd='+that.inputMessage,
					// success: (res) => {
					// 	console.log(res.data)
					// },
				 //  })
			      // 清空输入框
			      that.inputMessage = '';
			
			      // 模拟接收消息
			      setTimeout(() => {
			        const receivedMessage = {
			          id: Date.now(),
			          content: datas.data.to+'。',
			          type: 'received'
			        };
			        that.messages.push(receivedMessage);
			      }, 1000);
			    }
	}
	}
</script>

<style lang="scss">
.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: scroll;
}

.chat-input {
  display: flex;
  justify-content: space-between;
  height: 50px;
  width: 100%;
  .q{
	  font-size: 12px;
  }
}
</style>
